<template>
    <div class="ba_f pad_20">
        <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-bottom: 20px;">
            <el-tab-pane label="奖励金明细" name="1"></el-tab-pane>
            <el-tab-pane label="积分奖励明细" name="2"></el-tab-pane>
        </el-tabs>
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span v-if="activeName=='1'">奖励金明细</span>
                <span v-if="activeName=='2'">积分明细</span>
            </div>
        </div>
        <div class="pad_20 flex-bet">
            <el-form :inline="true" :model="formInline" class="demo-form-inline searchform">
                <el-form-item label="昵称/手机号">
                    <el-input v-model="formInline.keyword" size="medium" placeholder="昵称/手机号"
                              @input="selach"></el-input>
                </el-form-item>
                <el-form-item label="时间范围">
                    <el-date-picker v-model="formInline.region" type="daterange" range-separator="至"
                                    start-placeholder="开始日期" end-placeholder="结束日期" @change="selach"></el-date-picker>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="medium" @click="selach">搜索</el-button>
                </el-form-item>
            </el-form>
            <div class="flex"></div>
        </div>
        <el-table :data="list" v-loading="listLoading" :element-loading-text="elementLoadingText" stripe
                  style="width: 100%">
            <el-table-column prop="outTradeNo" label="用户信息">
                <template slot-scope="scope">
                    <div class="flex flex-y-top">
                        <div class>
                            <img class="goodlogo bor_rad50" :src="scope.row.portrait"/>
                        </div>
                        <div class="mar_l10">
                            <div class="flex">
                                <div>
                                    <div>{{scope.row.userName}}</div>
                                    <div>
                                        <el-tag size="mini" type="info" class="mar_l5">（ID:{{scope.row.userId}}）
                                        </el-tag>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="money" label="奖金" v-if="activeName=='1'"></el-table-column>
            <el-table-column prop="integral" label="积分" v-if="activeName=='2'"></el-table-column>
            <el-table-column prop="note" label="备注"></el-table-column>
            <el-table-column prop="createdAt" label="创建时间"></el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="page.total" :page-size="page.pagesize"
                       :current-page.sync="page.currentPage" @current-change="handleCurrentChange"></el-pagination>
    </div>
</template>
<script>
    import {awardDetails} from '@/api/plug';
    import {changeDate} from "@/utils/index";

    export default {
        created() {
            // if (this.$route.query.id) {
            //   this.id = this.$route.query.id
            //   this.edit()
            // }
            this.fetchData()
        },

        data() {
            return {
                elementLoadingText: '123',
                page: {
                    total: 0,
                    pagesize: 10,
                    currentPage: 1
                },
                list: [],
                listLoading: false,
                activeName: '1',
                form: {
                    shopValue: '1',
                    timeType: '1',
                    time: [new Date(), new Date()],
                    Mtime: ''
                },
                formInline: {
                    keyword: '',
                    region: []
                },
            };
        },
        methods: {
            selach() {
                this.fetchData();
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.fetchData();
            },
            handleClick() {
                this.fetchData();
            },
            async fetchData() {
                this.listLoading = true;
                const {data, count} = await awardDetails({
                    page: this.page.currentPage,
                    type: this.activeName,
                    keyword: this.formInline.keyword,
                    startTime: this.formInline.region ? changeDate(this.formInline.region[0]) : '',
                    endTime: this.formInline.region ? changeDate(this.formInline.region[1]) : '',
                });
                this.list = data;
                this.page.total = count;
                this.listLoading = false;
            },
        }
    };
</script>
